<template>
  <div class="gs banxin tanxin">
    <div class="gs_1">
      <div class="blk1">
        <h2>推荐</h2>
        <ul>
          <li>
            <a href class="a1">推荐歌手</a>
          </li>
          <li>
            <a href class="a2">入驻歌手</a>
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2>华语</h2>
        <ul>
          <li>
            <a href>华语男歌手</a>
          </li>
          <li>
            <a href>华语女歌手</a>
          </li>
          <li>
            <a href>华语组合/乐队</a>
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2>欧美</h2>
        <ul>
          <li>
            <a href>欧美男歌手</a>
          </li>
          <li>
            <a href>欧美女歌手</a>
          </li>
          <li>
            <a href>欧美组合/乐队</a>
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2>日本</h2>
        <ul>
          <li>
            <a href>日本男歌手</a>
          </li>
          <li>
            <a href>日本女歌手</a>
          </li>
          <li>
            <a href>日本组合/乐队</a>
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2>韩国</h2>
        <ul>
          <li>
            <a href>韩国男歌手</a>
          </li>
          <li>
            <a href>韩国女歌手</a>
          </li>
          <li>
            <a href>韩国组合/乐队</a>
          </li>
        </ul>
      </div>

      <div class="blk">
        <h2>其他</h2>
        <ul>
          <li>
            <a href>其他男歌手</a>
          </li>
          <li>
            <a href>其他女歌手</a>
          </li>
          <li>
            <a href>其他组合/乐队</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="gs_r">
      <div class="gs_r_1">
        <h3>
          <span class="span1">入驻歌手</span>
        </h3>
        <span class="span2">更多 ></span>
      </div>
      <div class="gs_cen">
        <ul>
          <li v-for="item, id in Singer" :key="id">
            <div>
              <img :src="item.picUrl" alt />
            </div>
            <p>
              <a href class="a1">{{ item.name }}</a>
              <a href class="c">
                <i></i>
              </a>
            </p>
          </li>
        </ul>
      </div>
      <div class="gs_r_1">
        <h3>
          <span class="span1">热门歌手</span>
        </h3>
        <span class="span2">更多 ></span>
      </div>
      <div class="gs_cen">
        <ul>
          <li v-for="item, id in Singer" :key="id" class="li_1">
            <div>
              <img :src="item.picUrl" alt />
            </div>
            <p>
              <a href class="a1">{{ item.name }}</a>
              <a href class="c">
                <i></i>
              </a>
            </p>
          </li>
          <li class="li_2" v-for="item, id in SingerS" :key="id">
            <a href>{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Singer, SingerS } from "@/request/api";
export default {
  data() {
    return {
      Singer: [],
      SingerS: []
    };
  },
  created() {
    Singer().then(res => {
      console.log(res.data.artists);
      this.Singer = res.data.artists;
    });
    SingerS().then(res => {
      console.log(res.data.artists);
      this.SingerS = res.data.artists;
    });
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.gs {
  background: url(../assets/image/1.png) repeat-y center 0;
  width: 982px;
  height: 1492px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  // border-width: 0 1px;

  .gs_1 {
    position: relative;
    float: left;
    width: 180px;

    .blk1 {
      padding: 0 10px 40px;
      margin-top: 51px;

      h2 {
        height: 25px;
        padding-left: 14px;
        font-size: 16px;
        font-family: "Microsoft Yahei";
      }

      ul {
        width: 160px;
        height: 62px;

        li {
          margin-bottom: 2px;
          float: left;
          width: 160px;
          height: 29px;
          line-height: 29px;

          .a1 {
            background-position: 0 0;
            text-decoration: none;
            color: #c20c0c;
            width: 133px;
            padding-left: 27px;
            float: left;
            width: 160px;
            height: 29px;
            line-height: 29px;
            background: url(../assets/image/2.png) no-repeat 0 9999px;
            cursor: pointer;
            font-size: 12px;
          }

          .a2 {
            color: #333;
            background-position: 0 0;
            text-decoration: none;
            width: 133px;
            padding-left: 27px;
            float: left;
            width: 160px;
            height: 29px;
            line-height: 29px;
            background: url(../assets/image/2.png) no-repeat 0 9999px;
            cursor: pointer;
            font-size: 12px;
          }
        }
      }
    }

    .blk {
      margin: 5px 0 0;
      padding-top: 16px;
      border-top: 1px solid #d3d3d3;

      h2 {
        height: 25px;
        padding-left: 14px;
        font-size: 16px;
        font-family: "Microsoft Yahei";
      }

      ul {
        width: 160px;
        height: 93px;

        li {
          margin-bottom: 2px;
          float: left;
          width: 160px;
          height: 29px;
          line-height: 29px;

          a {
            width: 133px;
            padding-left: 27px;
            background-position: 0 -30px;
            text-decoration: none;
            color: #333;
            float: left;
            width: 160px;
            height: 29px;
            line-height: 29px;
            background: url(../assets/image/2.png) no-repeat 0 9999px;
            cursor: pointer;
            font-size: 12px;
          }
        }
      }
    }
  }

  .gs_r {
    width: 800px;
    height: 1500px;
    // background-color: pink;

    .gs_r_1 {
      width: 719px;
      height: 42px;
      // background-color: pink;
      margin-top: 50px;
      margin-left: 40px;
      border-bottom: 2px solid #c20c0c;

      h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;

        .span1 {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 24px;
          font-weight: normal;
          margin-top: 14px;
          line-height: 42px;
        }
      }

      .span2 {
        float: right;
        margin-top: 14px;
        font-size: 12px;
        color: #999;
      }
    }

    .gs_cen {
      width: 719px;
      height: 318px;
      // background-color: pink;
      word-wrap: break-word;
      word-break: break-word;

      ul {
        margin: 20px 0 0 40px;
        height: 368px;
        width: 736px;

        li {
          // padding-left: 17px;
          width: 147px;
          height: 184px;
          float: left;
          display: inline-block;
          text-align: center;
          overflow: hidden;
          // padding: 0 0 30px 50px;
          line-height: 1.4;

          div {
            width: 130px;
            height: 130px;
            position: relative;
            display: block;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          p {
            margin-top: 8px;
            width: 100%;

            .a1 {
              float: left;
              max-width: 80%;
              display: inline-block;
              max-width: 85%;
              vertical-align: middle;
              color: #999;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              cursor: pointer;
              font-size: 12px;
              text-decoration: none;
            }

            .a2 {
              text-decoration: none;
              cursor: pointer;
              color: #333;

              i {
                position: relative;
                float: right;
                width: 17px;
                height: 18px;
                background-position: 0 -740px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background: url(../assets/image/icon.png) no-repeat 0 9999px;
                cursor: pointer;
                font-style: normal;
                text-align: left;
                font-size: inherit;
              }
            }
          }
        }

        .li_2 {
          // padding-left: 17px;
          height: 30px;
          width: 130px;
          padding-bottom: 0;
          line-height: 23px;
          float: left;
          display: inline-block;
          overflow: hidden;
          // padding: 0 0 30px 50px;
          line-height: 1.4;

          a {
            max-width: 105px;
            float: left;
            display: inline-block;
            // max-width: 85%;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            cursor: pointer;
            text-decoration: none;
            vertical-align: middle;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>